<template>
  <section id="stockKline">
    <!-- <div class="top">
      <div class="info clearfix">
        <div  class="pull_left name">
          <div v-if='$store.state.stockList && lists.name' >{{lists.name}}</div>
          <div v-else >--</div>
          <div v-if='$store.state.stockList && lists.code '>{{lists.code}}</div>
          <div v-else >--</div>
        </div>
        <div class="pull_left num red">
          <div  :class="countUpsAndDowns(
               lists.price,lists.close)>=0 ? 'green':'red'" v-if='$store.state.stockList && lists.price && lists.close ' >{{lists.price}}</div>
          <div v-else >--</div>
          <div>
            
            <span :class="countUpsAndDowns(
               lists.price,lists.close)>=0 ? 'green':'red'"
               v-if='$store.state.stockList && lists.price && lists.close'>{{countUpsAndDowns(lists.price,lists.close)}}</span>
            <span v-else>--</span> -->
            <!-- 涨幅 -->
            <!-- <span :class="countUpsAndDowns(
               lists.price,lists.close)>=0 ? 'green':'red'"
                v-if='$store.state.stockList && lists.price && lists.close'>{{ratioCalculate(lists.price,lists.close)}}</span>
            <span v-else>--</span>
          </div>
        </div>
        <div  class="pull_left today_open">
          <div>今开</div>
          <div v-if='$store.state.stockList && lists.open'>{{lists.open}}</div>
          <div v-else>--</div>
        </div>
        <div class="pull_left yes_close">
          <div>昨收</div>
          <div v-if='$store.state.stockList && lists.close' >{{lists.close}}</div>
          <div v-else>--</div>
        </div>
        <div class="pull_left highest">
          <div>最高</div>
          <div  v-if='$store.state.stockList && lists.height' >{{lists.height}}</div>
          <div v-else>--</div>
        </div>
        <div class="pull_left lowest">
          <div>最低</div>
          <div v-if='$store.state.stockList && lists.low' >{{lists.low}}</div>
          <div v-else>--</div>
        </div>
        <div class="pull_left volume">
          <div>成交量</div>
          <div v-if='$store.state.stockList && lists.suecNum'>{{(lists.suecNum / 100).toFixed(0)}}</div>
          <div v-else>--</div>
        </div>
        <div class="pull_left turnover">
          <div>成交额</div>
          <div v-if='$store.state.stockList && lists.allMoey!==null' >{{(lists.allMoey / 10000).toFixed(0)}}万</div>
          <div v-else>--</div>
        </div>
        <div @click="fullscreen" class="biggest pull_right">
          <img src="../assets/image/biggest.png" alt="" width="20" height="20">
        </div>
      </div>
      <div class="type">
        <ul>
          <li :class="interval =='1'  ? 'active':''" @click="interval='1',chartType='3',initTV()">分时</li>
          <li :class="interval =='D'  ? 'active':''" @click="interval='D',chartType='1',initTV()" >日K</li>
          <li :class="interval =='5'  ? 'active':''" @click="interval='5',chartType='1',initTV()">5分</li>
          <li :class="interval =='30' ? 'active':'' " @click="interval='30',chartType='1',initTV()">30分</li>
          <li :class="interval =='60' ? 'active':''  " @click="interval='60',chartType='1',initTV()">1小时</li>
          <li :class="interval =='W'  ? 'active':'' " @click="interval='W',chartType='1',initTV()">周K</li>
          <li>月K</li>
          <li><img src="../assets/image/index.png" alt="" width="15" height="13"></li>
        </ul>
      </div>
    </div> -->
    <div  id='tvContina' class="bottom">
      <!--k线-->
         <!-- <div v-show="!lodingState" id="tradingview_6fa68"></div> -->
         <div id="tradingview_6fa68"></div>
         <!-- <div v-if='lodingState' class="stock_logo"> -->
             <!-- <div class="tool_nav"> -->
               <!-- <img src="../assets/image/stokt_gj.png" alt=""> -->
             <!-- </div> -->

             <!-- <div class="load-container load8"> -->
               <!-- <div class="loader">Loading...</div> -->
               <!-- <a href="#load8">&lt; View Source &gt;</a> -->
             <!-- </div> -->
<!-- 
             <div class="hr"></div>
             <div class="cloum_hr"></div> -->
         <!-- </div> -->
    </div>
    <div >

    </div>
    <span v-show="false
    ">{{symbol}}</span>
    <span v-show="false
    ">{{lists}}</span>
  </section>
</template>
<script>
 
import {getOverrides } from '../views/deal/TradeView/datafeeds/configUration.js'
import { setTimeout, setImmediate } from 'timers';
export default {
  data() {
    return {
       widget:null,
       interval:'5',
       chartType:'1',
       lodingState:true,
    }
  },
  created(){
     
     if(localStorage.getItem('pricescale')==null){
        this.$store.state.pricescale.num=100000;
     }else{
        this.$store.state.pricescale.num=Number(localStorage.getItem('pricescale'))
     }

  },
  mounted(){
  },
  computed:{
       symbol(){
            let $store=this.$store.state;
            if($store.stockSymBol!=null){
            this.$nextTick(()=>{
               let tv=document.getElementById('tv')
               let stock=document.getElementById('stockLines')
               if(tv==null){
                 if(this.isIE()||this.isIE11()){
                    if(stock!=null)  stock.removeNode(true)
                 }else{
                    if(stock!=null)  stock.remove(true)
                 }
                     let _self=this;
                     var _src=document.createElement("script");
                         _src.setAttribute("src","https://s3.tradingview.com/tv.js");
                         _src.setAttribute("id","stockLines");
                         document.body.appendChild(_src);  
                        _src.onload=function(){
                          if(location.hash=='#/stock') _self.initTV($store.stockSymBol)
                            
                         }
               }else{
                 if(this.isIE()||this.isIE11()){
                    if(stock!=null)  stock.removeNode(true)
                     tv.removeNode(true)
                 }else{
                    if(stock!=null)  stock.remove(true)
                     tv.remove(true)
                 }
                     TradingView=null
           
                    let _self=this;
                     var _src=document.createElement("script");
                         _src.setAttribute("src","https://s3.tradingview.com/tv.js");
                         _src.setAttribute("id","stockLines");
                         document.body.appendChild(_src);  
                        _src.onload=function(){
                             if(location.hash=='#/stock') _self.initTV($store.stockSymBol)
                         }
               }
            })
            }
            return $store.stockSymBol
       },
       lists(){
            let $store=this.$store.state;
            this.lodingState=true;
            if($store.stockList!=null){ 
               return   $store.stockList
            }
       }
  },
  methods:{
      initTV(symbol){
            this.widget= new TradingView.widget({
          "symbol":symbol ,
          "interval": '1',
          "timezone": "Etc/UTC",
          "theme": "Light",
          "style": this.chartType,
          "width":'970',
          "height":'845',
          "locale": "zh_CN",
          "enable_publishing": false,
          "allow_symbol_change": true,
          "container_id": "tradingview_6fa68",
          "theme":"Dark",
          // "hide_top_toolbar":true,
          "hide_legend":false,
          // "hide_side_toolbar":false,//绘图工具
          "disabled_features":[
          //      "header_symbol_search",
          //      "header_saveload",
          //      "header_screenshot",
          //      "header_chart_type",
          //      "header_compare",
          //      "header_undo_redo",
          //      "timeframes_toolbar",
               "volume_force_overlay",
              //  "header_resolutions",
          //      "left_toolbar",
          //      "header_widget_dom_node",
           ],
          // "overrides":getOverrides('black'),
          "overrides":{
            'mainSeriesProperties.areaStyle.color1': "#606090",
            'mainSeriesProperties.areaStyle.color2': "#01F6F5",
            'mainSeriesProperties.areaStyle.linecolor': "red",
            'mainSeriesProperties.areaStyle.linestyle': 0,
            'mainSeriesProperties.areaStyle.linewidth': 1,
            'mainSeriesProperties.areaStyle.priceSource': "close",
            "mainSeriesProperties.candleStyle.upColor": '#f74f3f',   //  上涨 K线颜色
            "mainSeriesProperties.candleStyle.downColor": '#12c78c',  //  下跌 K线颜色
            "paneProperties.background": 'red',   //  视图背景颜色
            "volumePaneSize": "medium",
            'mainSeriesProperties.candleStyle.wickUpColor':'#f74f3f',
            'mainSeriesProperties.candleStyle.wickDownColor':'#12c78c',
            "mainSeriesProperties.candleStyle.borderUpColor":  '#f74f3f',   
            "mainSeriesProperties.candleStyle.borderDownColor":  '#12c78c',   
            "paneProperties.crossHairProperties.color": "#23283D", //  十字架颜色
            "mainSeriesProperties.priceLineColor": '#9194A3',  //现价线条颜色
          },
          
      });
 
   
      
      // let el=document.getElementById('tradingview_6fa68')
      // el.childNodes[0].style='position:relative;height:845px;box-sizing:content-box;margin:0 auto !important;padding:0 !important;'
      },
      isIE(){
　         if(!!window.ActiveXObject || "ActiveXObject" in window){
　         　　return true;
　         }else{
　         　　return false;
　           }
       },
       isIE11(){
　        　if((/Trident\/7\./).test(navigator.userAgent)){
　        　　　return true;
　        　}else{
　        　　　return false;
　        　}
      },
      //计算涨跌
      countUpsAndDowns(newsPrice,closePrice){
        var maxPrice=(Number(newsPrice)-Number(closePrice)).toFixed(this.getFloat(closePrice,true));
        maxPrice=maxPrice>=0?'+'+maxPrice:maxPrice;
        return maxPrice;
      },
     //获取小数位数
      getFloat(val, bol) {
        let _self = this;
        let _default = bol ? 0 : 1;
  
        let maxVal =
          String(val).split(".").length == 2
            ? val.split(".")[1].length
            : _default; // 最小变化单位
        return maxVal;
      },
     // 计算涨幅
     ratioCalculate(price, yclose) {
          let bili = 0;
          if (Number(yclose) != 0) {
            bili = (
              ((Number(price) - Number(yclose)) / Number(yclose)) *
              100
            ).toFixed(2);
      
            if (bili > 0) {
              bili = "+" + bili;
            }
          }
         return bili + "%";
      },
  },
  beforeDestroy() {
    this.widget=null;
    // console.log(document.getElementById('tradingview_6fa68'))
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
  
}
</script>
